<template>
  <div>
    <van-nav-bar
      v-if="windows === 1"
      title="注册"
      @click-left="back"
      size="30px"
    >
      <template #left>
        <van-icon name="cross" size="24" />
      </template>
    </van-nav-bar>
    <el-header class="classheader" v-if="windows === 0">
      <span>用户注册</span>
    </el-header>

    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        type="text"
        name="username"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="chname"
        type="text"
        name="username"
        label="昵称"
        placeholder="昵称"
        :rules="[{ required: true, message: '请填写昵称' }]"
      />
      <van-field
        v-model="password"
        type="password"
        label="密码"
        name="password"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
        v-model="rpassword"
        type="password"
        label="确认密码"
        name="rpassword"
        placeholder="确认密码"
        :rules="[{ required: true, message: '请填写确认密码' }]"
      />
      <van-radio-group v-model="radio1">
        <van-cell-group>
          <van-cell title="老师" clickable @click="radio1 = '1'">
            <template #right-icon>
              <van-radio name="1" />
            </template>
          </van-cell>
          <van-cell title="学生" clickable @click="radio1 = '2'">
            <template #right-icon>
              <van-radio name="2" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
      <!-- <van-field
          v-model="Verification"
          type="text"
          label="验证码"
          name="Verification"
          placeholder="验证码"
          :rules="[{ required: true, message: '请填写验证码',  }]"
        /> -->

      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >注册</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import axios from 'axios';
import { List } from 'vant';
export default {
  name: "RegisterPage",
  data() {
    return {
      radio1: "2",
      username: "",
      chname: "",
      password: "",
      rpassword: "",
      Verification: "",
      windows: 0,
    };
  },
  mounted() {
    if (window.innerWidth < 768) {
      this.windows = 1;
    } else {
      this.windows = 0;
    }
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    onSubmit() {
      if (this.password !== this.rpassword) {
        this.$message.error("两次密码输入不一致");
        return false;
      }
      let list = {
        username: this.username,
        chname: this.chname,
        password: this.password,
        authority: this.radio1,
      }
      console.log(list);
      axios.post("/user/register", {
          username: this.username,
          chname: this.chname,
          password: this.password,
          authority: this.radio1,
      }).then((res) => {
        if (res.data.code === 200) {
          this.$message.success("注册成功");
          this.$router.push("/Index");
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch((err) => {
        this.$message.error("注册失败,请检查用户名是否已经存在");
      });
      // console.log(
      //   this.username,
      //   this.chname,
      //   this.password,
      //   this.rpassword,
      //   this.Verification
      // );
    },
  },
};
</script>

<style scoped>
.classheader {
  background-color: #424242;
}
.classheader span {
  /* height: 60px;
    width: 300px;
    background-color: #f42525; */
  color: #fff;
  font-size: 20px;
  text-align: center;
  line-height: 60px;
}
</style>